<template>
  <div class="add-contacts">
    <child-head name="添加好友" type="true"></child-head>
    <header class="search">
      <input v-model="value" placeholder="请输入对方账号" />
      <span @click="add">查找</span>
    </header>
    <public-list
      v-if="historyMsgList.data.length > 0"
      :data="historyMsgList.data"
      type="validate"
      @agree="agree"
    ></public-list>
    <public-list
      v-if="list.length > 0"
      :data="list"
      type="add"
      @getItemId="sendData"
    ></public-list>
  </div>
</template>

<script>
import { ref, inject } from "vue";
import PublicList from "../../../components/pubilc-list/public-list";
import { searchFriendAPI } from "../../../api/firend.api";
// import { useRouter } from "vue-router";
import ChildHead from "../../../components/head-app/child-head";
import { formatTime } from "@/utils";
import { useStore } from "vuex";
import { reactive, computed } from "vue";

export default {
  name: "add-contacts",
  components: { ChildHead, PublicList },
  setup() {
    // const router = useRouter();
    let socket = inject("socket");
    const store = useStore();
    const { userInfo } = store.getters;
    const historyMsgList = reactive({
      data: computed(() => {
        return store.state.historyMsgList.data;
      }),
    });
    const agree = (data) => {
      console.log(data);
      socket.emit("agree", data);
      // state.InfoList.status = '1'

      // store.commit('updateSysNewsList', state.InfoList)
    };
    const sendData = (friend) => {
      let obj = {
        userName: userInfo.userName,
        mes: "请求添加好友",
        time: formatTime(new Date(), "yyyy-MM-dd hh:mm:ss"),
        avatar: userInfo.avatar,
        nickname: userInfo.nickname,
        signature: userInfo.signature,
        read: [],
        self: userInfo.id,
        other: friend.id,
        otherName: friend.nickname,
        otherAvatar: friend.avatar,
        otherUserName: friend.userName,
        friendRoom: userInfo.id + "-" + friend.id,
        roomId: friend.id + "-" + userInfo.id,
        state: "friend",
        type: "validate",
        status: "0",
      };
      socket.emit("sendValidate", obj);
      console.log("给服务端发送数据");
    };
    const value = ref("yueguiming");
    let list = ref([]);
    const add = async () => {
      let res = await searchFriendAPI({ userName: value.value });
      console.log(res, "2");
      list.value = res;
    };
    return {
      agree,
      historyMsgList,
      value,
      add,
      list,
      sendData,
    };
  },
};
</script>

<style scoped lang="scss">
.search {
  height: 1.3rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0.2rem;
  border-bottom: 0.02rem solid rgba(215, 212, 212, 0.3);

  input {
    height: 0.8rem;
    width: 100%;
    border: 1px solid red;
    border-radius: 0.1rem;
    font-size: $font-size-32;
    padding-left: 0.2rem;
    margin-right: 0.2rem;
  }

  span {
    width: 3rem;
    height: 0.8rem;
    font-size: $font-size-32;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.1rem;
    background: #2ab3c0;
  }
}
</style>
